<template>
    <div class="body">
        <h2>管理员模块</h2>
        <div class="container">
            <!-- 竞猜情况 -->
            <div class="card">
                <h3>竞猜情况</h3>
                <table>
                    <thead>
                        <tr>
                            <th>用户名</th>
                            <th>竞猜内容</th>
                            <th>是否成功</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="matchVo in matchVos" :key="matchVo.matchId">
                            <td>{{ matchVo.name }}</td>
                            <td>{{ matchVo.itemName + matchVo.title + matchVo.homeName + 'vs' + matchVo.awayName }}</td>
                            <td>{{ matchVo.win == true ? '成功' : '失败' }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- 兑换情况 -->
            <div class="card">
                <h3>兑换情况</h3>
                <table>
                    <thead>
                        <tr>
                            <th>用户名</th>
                            <th>兑换物品</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in itemVos">
                            <td>{{ item.userName }}</td>
                            <td>{{ item.itemName }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- 后台统计信息 -->
            <div class="card">
                <h3>后台统计信息</h3>
                <table>
                    <thead>
                        <tr>
                            <th>手机号</th>
                            <th>姓名</th>
                            <th>地址</th>
                            <th>积分</th>
                            <th>账号状态</th>
                            <th>账号状态</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="userInfo in users" :key="userInfo.id">
                            <td>{{ userInfo.phone }}</td>
                            <td>{{ userInfo.name }}</td>
                            <td>{{ userInfo.address }}</td>
                            <td>{{ userInfo.score }}</td>
                            <td>{{ userInfo.status }}</td>
                            <td>
                                <button @click="blockUser(userInfo.id)"
                                    :class="userInfo.status == 1 ? 'unblock-button' : 'block-button'">
                                    {{ userInfo.status == 0 ? '封禁' : '解禁' }}
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="button-group">
                <button @click="changePublic">公布结果</button>
                <button @click="reset" class="reset-button">重置</button>
            </div>
        </div>
    </div>
</template>

<script setup>
import service from "@/axios";
import useUser from '@/hooks/useUser';
import useMatchVo from '@/hooks/useMatchVo';
import useMatch from '@/hooks/useMatch';
import useItem from '@/hooks/useItem';
import { onMounted } from 'vue';

const { getAllUsers, blockUser, users } = useUser();
const { matchVos, getAllMatchVo } = useMatchVo();
const { matches, getAllMatches } = useMatch();
const { itemVos, getAllItemVos } = useItem();

async function changePublic() {
    localStorage.setItem('public', true);
    await getAllMatches();
    const allMatchIds = matches.value.map(match => match.id);

    // 创建一个新的 groupStatus 对象
    const newGroupStatus = {};

    // 将所有比赛的 groupStatus 设置为 true
    allMatchIds.forEach(matchId => {
        newGroupStatus[matchId] = true;
    });

    // 更新 localStorage
    localStorage.setItem('disabledGroups', JSON.stringify(newGroupStatus));
    alert("公布成功")
}

async function reset() {
    localStorage.setItem('public', false);
    await getAllMatches();
    const allMatchIds = matches.value.map(match => match.id);
    const newGroupStatus = {};
    allMatchIds.forEach(matchId => {
        newGroupStatus[matchId] = false;
    });
    localStorage.setItem('disabledGroups', JSON.stringify(newGroupStatus));
    await service.post("/destroy");
    alert("已重置");
}


onMounted(async () => {
    await getAllUsers();
    await getAllMatchVo();
    await getAllItemVos();
    console.log(itemVos.value);
});
</script>

<style scoped>
.body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

h2 {
    color: #333;
}

.body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

h2 {
    color: #333;
}

.container {
    width: 80%;
    max-width: 1200px;
    margin-top: 20px;
}

.card {
    background-color: #fff;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.card h3 {
    margin-top: 0;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

th,
td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

th {
    background-color: #f8f8f8;
}

.block-button {
    background-color: red;
    /* 封禁按钮的颜色 */
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 5px;
}

.unblock-button {
    background-color: green;
    /* 解禁按钮的颜色 */
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 5px;
}

.block-button:hover,
.unblock-button:hover {
    opacity: 0.8;
    /* 悬停效果 */
}

.button-group {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
}

.reset-button {
    background-color: red;
}

button:hover {
    opacity: 0.8;
}
</style>